<template>
	<view class="page-body p10 bg-white">
		<view>
			<view v-if="videoCover == false" class="video_cover">
				<image class="bg" :src="baseUrl+item.title_img" style="height:100%;width:100%"></image>
				<image class="play" :src="play" @click="videoCover = true"></image>
			</view>
			<view v-else>
				<video controls @ended="videoCover=false"  class="video_box" autoplay="true" :muted="sound" :src="baseUrl+item.video_url" >
					<cover-image @click="changevoice" class="voice" :src="sound?mute:voice"></cover-image>
				</video>
			</view>
		</view>
		<view class="title">{{item.title}}</view>
		<view class="mt20 color-94 fs26">
			<text class="time">{{item.add_time}}</text>
			<text class="fr">阅读：{{item.view_num}}</text>
		</view>
		<view class="mt20 color-94">{{item.description}}</view>
		<view class="detail-desc">
			<view class="d-header">
				<text>课程详情</text>
			</view>
			<rich-text :nodes="item.content"></rich-text>
		</view>
		<view class="goHome">
			<view class="share-btn">
				<image class="share-img" @click="showShareTip" src="/pagesA/static/images/share.png" mode=""></image>
			</view>
			<image class="go-home-btn" @click="app.goPage('/pages/shop/index/index')" src="/pagesB/static/channel/images/order_type02.png" mode=""></image>
		</view>
		<view class="tip-mask" v-if="shareTip" @click="showShareTip">
			<image class="img" src="/static/public/images/share/tip2.png" mode="widthFix"></image>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				baseUrl:this.config.baseUrl,
				videoCover:false,
				sound: false,
				play:'/static/public/images/video_icon/video_play.png',
				mute:'/static/public/images/video_icon/mute.png',
				voice:'/static/public/images/video_icon/voice.png',
				item:{},
				shareTip:false
			}
		},
		onLoad(options) {
			if (options.id < 1){
				return this.app.showModal('传参错误.',-1);
			}
			this.getInfo(options.id);
			
		},
		onShow() {
		},
		onReady() {},
		methods: {
			showShareTip(){
				this.shareTip = !this.shareTip
			},
			setWxShare(data) {	
				var wxshare = require('./wxshare');
				this.$u.post('/member/api.users/getWxShare',{url:window.location.href}).then(res => {
					wxshare.config({
						debug: false,//是否打开调试
						appId: res.data.wxShare.appId, // 公众号的唯一标识  
						timestamp: res.data.wxShare.timestamp, // 生成签名的时间戳  
						nonceStr: res.data.wxShare.nonceStr, // ，生成签名的随机串  
						signature: res.data.wxShare.signature, // 签名  
						jsApiList: ['updateAppMessageShareData','updateTimelineShareData',]
					});
					wxshare.ready(function() {
						let links = window.location.href;
						let shareLink = ''
						if (links.indexOf('share_token') < 0){
							if (links.indexOf('?') > 0){
								shareLink = links + '&share_token=' + res.data.token; 
							}else{
								shareLink = links + '?share_token=' + res.data.token; 
							}
						}else{
							shareLink = links;
						}
						//分享给朋友
						wxshare.updateAppMessageShareData({
							title: data.title?data.title:'', // 分享标题  
							desc: data.desc?data.desc:'', // 分享描述  
							link: shareLink, // 当前页面链接  
							imgUrl: data.imgUrl?data.imgUrl:'', // 分享图标                                
							success: function() {//分享成功回调
								 
							},
							cancel: function() {//取消分享回调
							 
							}
						});
						//分享到朋友圈
						wxshare.updateTimelineShareData({
							title: data.title?data.title:'', // 分享标题
							// desc: data.desc?data.desc:'', // 分享描述  
							link: shareLink, // 当前页面链接  
							imgUrl: data.imgUrl?data.imgUrl:'', // 分享图标                             
							success: function() {
							},
							cancel: function() {
							}
						});
					})
					
				})
			},
			getInfo(id){
				let _this = this;
				_this.$u.post('school/api.train_topic/getInfo',{id:id}).then(res => {
					_this.item = res.data;
					let data = [];
					data.title = _this.item.title;
					data.desc = _this.item.description;
					data.imgUrl = _this.config.baseUrl+_this.item.title_img;
					_this.setWxShare(data);
				})
			},
			changevoice(){
				this.sound = this.sound == false ? true : false;
			}
		}
	}
</script>

<style lang="scss">
.video_box{
	width: 100%;
}
.video_cover {
	width: 100%;
	position: relative;
	height:420rpx;
}
.video_cover .play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130rpx;
    height: 120rpx;
    margin-top: -60rpx;
    margin-left: -65rpx;
}
.voice {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    top: 50rpx;
    right: 30rpx;
}

.title{
	margin-top: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
}

/*  详情 */
	.detail-desc{
		background: #fff;
		margin-top: 16rpx;
		.d-header{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			font-size: $font-base + 2rpx;
			color: $font-color-dark;
			position: relative;
			text{
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
			&:after{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc; 
			}
		}
		img{
			width: 100%;
		}
	}
</style>
